<template>
	<uv-popup ref="popupBox" mode="bottom" :round="10" @maskClick="closeFunc">
		<view class="title">项目评价</view>
		<scroll-view class="scroll-view" scroll-y>
			<view class="uv-form-box" v-if="show">
				<view class="score-item">
					<view class="score-cell" v-for="(item, idx) in evaluation_content" :key="idx">
						<view class="score-label">{{item.name}}</view>
						<view class="score-desc">
							<uv-rate activeColor="#F7A059" v-model="item.score"></uv-rate>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="btn-box">
			<uv-button @click="closeFunc" text="取 消" customTextStyle="font-weight: 400;font-size: 28rpx;color: #8F8F8F;"
				customStyle="width: 180rpx;height: 80rpx;background: #FFFFFF;border-radius: 16rpx;border: 2rpx solid #E3E3E3;margin-bottom:20rpx;"></uv-button>
			<uv-button @click="formSubmit" type="primary" text="提 交"
				customTextStyle="font-weight: 400;font-size: 28rpx;color: #FFFFFF;"
				customStyle="width: 500rpx;height: 80rpx;background: #3B75FF;border-radius: 16rpx;margin-bottom:20rpx;"></uv-button>
		</view>
	</uv-popup>
</template>

<script>
	export default {
		props: ['show', 'project_id'],
		data() {
			return {
				evaluation_content: [],
			}
		},
		watch: {
			show(value) {
				if (value) {
					this.getDetail()
				} else {
					this.$refs.popupBox.close()
				}
			}
		},
		mounted() {

		},
		methods: {
			// 获取子类详情
			getDetail() {
				let that = this
				this.$Api.khGetProjectDetails({
					project_id: this.project_id,
					tab_type: 9
				}).then(res => {
					console.log(res, '评分获取详情');
					if (res.code == 200) {
						this.evaluation_content = JSON.parse(JSON.stringify(res.data.evaluation_content))

						this.$refs.popupBox.open()
					}
				})
			},
			closeFunc() {
				this.evaluation_content = []
				this.$emit('close', false);
			},
			formSubmit() {
				let evaluation_content = this.evaluation_content
				let check = false
				evaluation_content.map(item => {
					if (item.score < 1) {
						check = true
					}
				})
				if (check) {
					uni.showToast({
						title: '还有未评价的选项！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true,
					title: '信息提交中...'
				});
				this.$Api.khCustomerEvaluation({
					project_id: this.project_id,
					evaluation_content
				}).then(res => {
					console.log(res, '客户评价');
					uni.hideLoading();
					if (res.code == 200) {
						this.$emit('close', false);
						this.$emit('lazy');
					}
					uni.showToast({
						title: res.code == 200 ? '操作成功' : res.message,
						icon: res.code == 200 ? 'success' : 'error'
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.BJL-rate {
		margin: 40rpx 0 0;
	}

	.title {
		font-size: 32rpx;
		width: 100%;
		line-height: 100rpx;
		text-align: center;
	}

	.btn-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}

	.scroll-view {
		width: 100%;
		max-height: 50vh;
		background-color: #fff;

		// padding: 0 30rpx;
		// box-sizing: border-box;
		.uv-form-box {
			padding: 0 30rpx !important;
		}

		.file-box {
			width: 100%;
			display: flex;
			flex-direction: row-reverse;
		}

		.file-list {
			width: 100%;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.file-item {
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;
				margin-left: 10rpx;
				padding: 10rpx;
				background-color: #f8f8f8;

				.file-name {
					font-size: 24rpx;
				}
			}

			.file-media {
				width: 150rpx;
				height: 150rpx;
				margin: 0 27rpx 22rpx 0;
				overflow: hidden;
				border-radius: 10rpx;
				position: relative;

				&:nth-child(4n) {
					margin-right: 0;
				}

				.media-item {
					width: 100%;
					height: 100%;
				}

				.icon-box {
					position: absolute;
					z-index: 1;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					background-color: rgba(0, 0, 0, 0.6);
					width: 70rpx;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
				}

				.del-icon {
					width: 60rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					right: 10rpx;
					top: 10rpx;
					z-index: 1;
					background-color: rgba(0, 0, 0, 0.6);
					border-radius: 10rpx;
				}
			}
		}
	}

	.score-item {
		background-color: #fff;
		border-radius: 16rpx;
		position: relative;
		padding: 30rpx 0;

		.score-cell {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			&:first-child {
				margin-top: 0;
			}

			.score-label {
				color: #828A9D;
				font-size: 26rpx;
			}
		}
	}
</style>